<template>
    <div>
        v-on 使用对标签的事件监听，可以简化写法
        v-on:事件名字="事件处理函数" 可以简写为 @事件名字="事件处理函数"
    </div>
    <h1>胖来购物：统计购买数量：{{ count }}</h1>
    <button v-on:click="count++">购物数量加 1</button> &nbsp;
    <button v-on:click="onCount">根据函数购买数量加1</button> &nbsp;
    <button @click="onMacth(5)">每次购买数量+5</button><br>
    <br>
    <!---on 事件处理对象
    阻止默认事件行为，冒泡事件
    语法两种方式：
    1、无参，通过浏览器传递参数
    2、有参，通过事件对象传递参数
    event.preventDefault() 阻止默认事件行为

    -->
    <a @click="one" href="https://www.baidu.com">阻止跳转到百度</a>&nbsp;&nbsp;
    <a @click="two(10, $event)" href="https://www.baidu.com">阻止跳转到百度里面</a>
    <br><br>
    <!-- 动态更改 选择器 id转class-->
    <span :[attributeName]="id">v-bind先绑定</span><br><br>
    <button @click="changeClass">点击改变属性选择器</button>
    <button @click="mouseEvent = 'mouseover'">鼠标移动上改变</button>
    <hr>
    <h2>v-on 修饰符</h2>
    <div @click="facthfn">
        <button @click.stop="btn">.stop阻止冒泡</button>
        <a href="https://www.baidu.com" @click.prevent="btn">.prevent阻止跳转到百度</a>
        <button @click.once="btn">.once点击一次</button>
    </div>

</template>

<script setup>
import { ref } from 'vue';
const count = ref(0)

const onCount = () => {
    count.value++
}
// 带参数的函数
const onMacth = (num) => {
    console.log(num);

    count.value += num
}

const one = (event) => {
    console.log("阻止跳转");
    event.preventDefault()
}
const two = (num, e) => {
    console.log(num);
    count.value += num
    e.preventDefault()

}
// 动态更改选择器的样子
const id = ref('d1')
const attributeName = ref('id')
const changeClass = () => {
    console.log("点击了按钮");
    attributeName.value = 'class'
}
const facthfn = () => { 
    console.log("触发了父元素");
    
}
const btn = () => {
    console.log("按钮被点击了");
    
}
</script>

<style scoped>
#d1 {
    color: red;
    font-size: 20px;
}

.d1 {
    color: blue;
    font-size: 30px;
    font-weight: 800;
}
</style>